<template>
  <div id="#userManage">
    <el-card shadow="hover">
      <el-card shadow="hover">
        用户账户：
        <el-select style="width: 140px" size="small" v-model="nameinput" placeholder="用户账号" clearable="">
          <el-option v-for="item in options" :key="item.id" :label="item.username" :value="item.username">
          </el-option>
        </el-select>
        余额状态：
        <el-select style="width: 100px; margin-right: 10px" v-model="qianvalue" size="small" placeholder="请选择">
          <el-option v-for="item in qianoptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" size="small" @click="timequery()" plain icon="el-icon-search">
          查询</el-button>
        <el-button type="primary" plain icon="el-icon-plus" @click="adddialogbutton()" size="small">添加</el-button>

        <el-button type="primary" icon="el-icon-loading" @click="restbutton()" size="small" plain>刷新</el-button>

      </el-card>
      <!-- 表格开始 -->
      <el-card shadow="hover">
        <el-table v-loading="loading" ref="multipleTable" :data="tableData" border tooltip-effect="dark"
          style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="index" align="center" width="50">
          </el-table-column>
          <!-- 名称 -->
          <el-table-column prop="mark" width="160" label="名称" align="center">
            <template slot-scope="scope">
              <span style="font-weight: 600; color: #409eff">
                {{ scope.row.mark }}</span>
            </template>
          </el-table-column>
          <!-- 账户 -->
          <el-table-column prop="username" width="120" label="账号" align="center">
          </el-table-column>
          <!-- 角色 -->
          <el-table-column align="center" width="100" label="角色" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="JSON.parse(scope.row.params).role == 'other'">
                用户</span>
              <span v-if="JSON.parse(scope.row.params).role == 'admin'">
                管理员</span>
              <span v-if="JSON.parse(scope.row.params).role == 'boss'">
                老板</span>
            </template>
          </el-table-column>
          <!-- 角色状态 -->
          <el-table-column align="center" width="100" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="color: #fff; background-color: red; border-radius: 2px"
                v-if="JSON.parse(scope.row.params).locking == true">
                X锁定</span>
              <span v-if="JSON.parse(scope.row.params).locking == false">
                正常</span>
            </template>
          </el-table-column>
          <!-- 创建时间 -->
          <el-table-column label="创建时间" width="250" align="center">
            <template slot-scope="scope">{{ scope.row.createTime }}</template>
          </el-table-column>
          <!-- 账户手机号 -->
          <el-table-column prop="mobile" width="120" label="用户手机号" align="center">
          </el-table-column>
          <!-- 余额 -->
          <el-table-column prop="balance" align="center" width="140" label="余额" show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="font-weight: 800"> ￥{{ scope.row.balance }}</span>
            </template>
          </el-table-column>

          <!-- 透支 -->
          <el-table-column prop="quota" align="center" width="140" label="透支额度" show-overflow-tooltip>
            <template slot-scope="scope">
              <span style="font-weight: 800; color: red">
                ￥{{ scope.row.quota }}</span>
            </template>
          </el-table-column>
          <!-- 接口速度 -->
          <el-table-column label="速率" width="50px" align="center">
            <template slot-scope="scope">{{
            JSON.parse(scope.row.params).speed
            }}</template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button style="margin-left: 5px; margin-right: 5px" size="small" slot="reference" plain
                icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button style="margin-left: 5px; margin-right: 5px" size="small" slot="reference" plain
                icon="el-icon-setting" @click="handlelock(scope.$index, scope.row)">锁定</el-button>
              <!-- 修改弹框 -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格结束 -->
        <!-- 添加用户0 -->
        <el-dialog title="添加用户" width="50%" center :close-on-click-modal="false" :visible.sync="adddialog">
          <el-form :model="ruleForm" :inline="true" :rules="rules" ref="ruleForm" label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="用户账号" prop="username">
              <el-input style="width: 200px;" class="from" disabled v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="用户密码" prop="password">
              <el-input style="width: 200px;" disabled class="from" type="password" v-model="ruleForm.password">
              </el-input>
            </el-form-item>
            <br>
            <el-form-item label="用户电话" prop="mobile">
              <el-input style="width: 200px;" class="from" type="mobile" clearable v-model="ruleForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="透支额度" prop="quota">
              <el-input style="width: 200px;" clearable v-model="ruleForm.quota"></el-input>
            </el-form-item>
            <el-form-item label="IP白名单" prop="whiteIp">
              <el-input style="width: 200px;" class="from" clearable v-model="ruleForm.whiteIp"></el-input>
            </el-form-item>
            <el-form-item label="用户备注" prop="mark">
              <el-input style="width: 200px;" class="from" clearable v-model="ruleForm.mark"></el-input>
            </el-form-item>
            <el-form-item label="用户名称" prop="name">
              <el-input class="from" clearable v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="接口速度" prop="speed">
              <el-input class="from" clearable v-model="ruleForm.speed"></el-input>
            </el-form-item>
            <el-form-item label="是否管理">
              <el-select class="from" v-model="ruleForm.admin" placeholder="请选择">
                <el-option v-for="item in adminoptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="角色选择">
              <el-select class="from" v-model="ruleForm.role" placeholder="请选择">
                <el-option v-for="item in roleoptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-left: 35%">
              <el-button plain @click="submitForm('ruleForm')">添加</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
              <el-button @click="adddialog = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!-- 添加用户1 -->
        <!-- 分页查询 -->
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="this.pageCode" :page-sizes="[10, 20, 30, 40]" :page-size="this.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="this.totalCount">
          </el-pagination>
        </div>
        <!-- 分页查询 -->
      </el-card>
      <!-- 修改弹框0 -->
      <el-dialog title="修改用户" width="50%" style="text-align:center ;" center :close-on-click-modal="false"
        :visible.sync="editdialog">
        <el-form :model="editfrom" :inline="true" label-width="100px">
          <el-form-item label="用户账号">
            <el-input style="width: 200px;" class="from" disabled v-model="editfrom.username"></el-input>
          </el-form-item>
          <el-form-item label="用户密码">
            <el-input style="width: 200px;" class="from" type="password" v-model="editfrom.password"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="用户电话">
            <el-input style="width: 200px;" class="from" type="mobile" clearable v-model="editfrom.mobile"></el-input>
          </el-form-item>
          <el-form-item label="透支额度">
            <el-input clearable v-model="editfrom.quota"></el-input>
          </el-form-item>
          <el-form-item label="IP白名单">
            <el-input class="from" clearable v-model="editfrom.whiteIp"></el-input>
          </el-form-item>
          <el-form-item label="用户备注">
            <el-input class="from" clearable v-model="editfrom.mark"></el-input>
          </el-form-item>
          <el-form-item label="用户名称">
            <el-input class="from" clearable v-model="editfrom.mark"></el-input>
          </el-form-item>
          <el-form-item label="接口速度">
            <el-input class="from" clearable v-model="editfrom.speed"></el-input>
          </el-form-item>
          <el-form-item label="是否管理">
            <el-select class="from" v-model="editfrom.admin" placeholder="请选择">
              <el-option v-for="item in editadminoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="角色选择">
            <el-select class="from" v-model="editfrom.role" placeholder="请选择">
              <el-option v-for="item in editroleoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <br>
          <div style="text-align: center;">
            <el-button plain @click="editfromsubmit()">修改</el-button>
            <el-button plain @click="editdialog = false">取消</el-button>
          </div>
        </el-form>
      </el-dialog>
      <!-- 修改弹框1 -->
    </el-card>
  </div>
</template>

<script>
import debounce from "lodash.debounce";
import { query, addUser, updateUserEntity, updateUserLock } from "@/api/user";
import { getUsername } from "@/api/order";
export default {
  name: "userManage",
  async created() {
    // 获取用户名
    let res = await getUsername();
    if (res.status == 0) {
      this.options = res.data;
    }
    // 查询接口
    // let Examine = await query();
    // this.tableData = Examine.data.pageList;
    // this.totalCount = Examine.data.totalCount;
    // this.pageCode = Examine.data.pageCode;
    //console.log(Examine);
    this.restbutton()
  },

  data() {
    return {
      // 加载
      loading: false,
      locking: false,
      ruleForm: {
        username: "",
        password: "123456",
        spid: "",
        mobile: "",
        quota: 0,
        whiteIp: "0.0.0.0",
        mark: "",
        name: "",
        speed: 0,
        admin: false,
        role: "other",
      },
      editfrom: {
        username: "",
        password: "",
        spid: "",
        params: "",
        mobile: "",
        userId: "",
        quota: 0,
        whiteIp: "",
        mark: "",
        name: "",
        speed: 0,
        admin: false,
        role: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "长度在11个字符",
            trigger: "blur",
          },
        ],
        quota: [{ required: true, message: "请输入透支额度", trigger: "blur" }],
        whiteIp: [
          { required: true, message: "请输入IP白名单", trigger: "blur" },
        ],
        mark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        speed: [{ required: true, message: "请输入速度", trigger: "blur" }],
      },
      formLabelWidth: "100px",
      adddialog: false,
      editdialog: false,
      options: [],
      qianoptions: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "欠费",
        },
        {
          value: "1",
          label: "正常",
        },
      ],
      adminoptions: [
        {
          value: true,
          label: "是",
        },
        {
          value: false,
          label: "否",
        },
      ],
      editadminoptions: [
        {
          value: true,
          label: "是",
        },
        {
          value: false,
          label: "否",
        },
      ],
      editroleoptions: [
        {
          value: "other",
          label: "普通用户",
        },
        {
          value: "admin",
          label: "管理员",
        },
        {
          value: "boss",
          label: "老板",
        },
      ],
      roleoptions: [
        {
          value: "other",
          label: "普通用户",
        },
        {
          value: "admin",
          label: "管理员",
        },
        {
          value: "boss",
          label: "老板",
        },
      ],
      qianvalue: "",
      totalCount: 1,
      pageSize: 10,
      pageCode: 1,
      //当前页码
      currentPage: 1,
      status: "",
      nameinput: "",
      typeinput: "",
      tableData: [],
      multipleSelection: [],
    };
  },

  methods: {
    // 随机生成随机数
    randomPassword(size) {
      var seed = new Array(
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "m",
        "n",
        "p",
        "Q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9"
      ); //数组
      var seedlength = seed.length; //数组长度
      let createPassword = "";
      for (let i = 0; i < size; i++) {
        let j = Math.floor(Math.random() * seedlength);
        createPassword += seed[j];
      }
      //console.log("随机组合：", createPassword);
      this.ruleForm.username = createPassword;
    },
    // 刷新列表按钮
    async restbutton() {
      // 获取用户名
      let res = await getUsername();
      if (res.status == 0) {
        this.options = res.data;
      }
      // 查询接口
      this.loading = true;
      let Examine = await query();
      if (Examine) {
        this.loading = false;
        this.tableData = Examine.data.pageList;
        this.totalCount = Examine.data.totalCount;
        this.pageCode = Examine.data.pageCode;
        //console.log(Examine);
      }

    },
    // 添加按钮
    adddialogbutton() {
      this.adddialog = true;
      this.randomPassword(10);
    },
    // 添加提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.spid = this.ruleForm.mobile;
          //console.log(this.ruleForm);
          addUser(this.ruleForm);
          this.timequery();
          this.adddialog = false;
          this.$message({
          message: '添加用户成功',
          type: 'success'
        });
        } else {
          //console.log("error submit!!");
          return false;
        }
      });
    },
    // 添加重置按钮
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.randomPassword(10);

    },

    //查询
    timequery: debounce(async function () {
      this.loading = true;
      let data = {
        username: this.nameinput,
        balance: this.qianvalue,
      };
      let Examine = await query(data);
      if (Examine) {
        this.loading = false;
        ////console.log(Examine.data.pageList);
        this.tableData = Examine.data.pageList;
        this.totalCount = Examine.data.totalCount;
        this.pageCode = Examine.data.pageCode;
      }

    }, 500),

    //修改信息按钮
    handleEdit(index, row) {
      var n = JSON.parse(row.params);
      //console.log(index, row);
      this.editdialog = true;
      this.editfrom.username = row.username;
      this.editfrom.password = row.password;
      this.editfrom.spid = row.spid;
      this.editfrom.mobile = row.mobile;
      this.editfrom.userId = row.userId;
      this.editfrom.quota = row.quota;
      this.editfrom.whiteIp = row.whiteIp;
      this.editfrom.mark = row.mark;
      this.editfrom.locking = n.locking;
      this.editfrom.mark = row.mark;
      this.editfrom.speed = n.speed;
      this.editfrom.role = n.role;
      this.editfrom.admin = n.admin;
      //console.log(this.editfrom);
    },
    // 修改提交按钮
    editfromsubmit() {
      this.editfrom.name = this.editfrom.mark;
      updateUserEntity(this.editfrom);
      this.editdialog = false;
      this.timequery();
    },
    // 锁定按钮
    handlelock(index, row) {
      //console.log(index, row);
      var n = JSON.parse(row.params);
      //console.log(n);
      if (n.locking != true) {
        n.locking = true;
        //console.log("lock", n.locking);
        //console.log("n", n);
        let data = {
          id: row.userId,
          locking: n.locking,
        };
        updateUserLock(data);
        this.timequery();
      } else {
        n.locking = false;
        //console.log("lock", n.locking);
        //console.log("n", n);
        let data = {
          id: row.userId,
          locking: n.locking,
        };
        updateUserLock(data);
        this.timequery();
      }
    },
    //表格分页
    async handleSizeChange(val) {
      ////console.log(`每页 ${val} 条`);
      this.pageSize = val;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: this.pageCode,
      };
      let Examine = await query(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
    },
    async handleCurrentChange(val) {
      this.pageCode = val;
      let data = {
        username: this.nameinput,
        pageSize: this.pageSize,
        pageNum: this.pageCode,
      };
      let Examine = await query(data);
      this.tableData = Examine.data.pageList;
      this.totalCount = Examine.data.totalCount;
    },
    //行内选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      ////console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
#userManage {
  .from {
    width: 200px;
  }
}
</style>